import { sysDictList } from '@/services/common';
import {
  patientInfo,
  patientLimitsList,
  patientLimitsUpdateBatch,
} from '@/services/patientMsg';
import { PageContainer, ProCard } from '@ant-design/pro-components';
import {
  Button,
  Col,
  InputNumber,
  message,
  Row,
  Select,
  Switch,
  Table,
} from 'antd';
import { useEffect, useState } from 'react';
import './index.less';

const PatientLimit = () => {
  const urlParams = new URLSearchParams(window.location.search);
  const patientId = urlParams.get('patientId');
  const [patientData, setPatientData] = useState<any>({});
  const [patientLimitsListData, setPatientLimitsListData] = useState<any>([]);
  const [sysDictLevelListData, setSysDictLevelListData] = useState<any>([]);
  const getBaseData = async () => {
    const patientRes = await patientInfo({
      patientId: patientId,
    });
    const patientLimitsRes = await patientLimitsList({
      patientId: patientId,
      pageNum: 1,
      pageSize: 10000,
    });
    if (patientRes?.code === 200 && patientLimitsRes?.code === 200) {
      setPatientData(patientRes.data);
      setPatientLimitsListData(patientLimitsRes.rows);
    }
    const resLevel = await sysDictList({
      pageSize: 1000,
      pageNum: 1,
      itemClass: 'monitorLimitsLevel',
    });
    if (resLevel?.code === 200) {
      const data = resLevel.rows.map((its: any) => {
        return {
          label: its.itemName,
          value: its.itemValue,
        };
      });
      setSysDictLevelListData(data);
    }
  };
  const handleChangeLimit = (e: any, index: number, type: string) => {
    let targetVal = JSON.parse(JSON.stringify(patientLimitsListData));
    targetVal[index][type] = e;
    setPatientLimitsListData(targetVal);
  };
  const handleUpDateLimit = async () => {
    const targetData = patientLimitsListData.map((its: any) => {
      return {
        ...its,
        alarmSwitch:
          its.alarmSwitch === '1' || its.alarmSwitch === true ? '1' : '0',
      };
    });
    const res = await patientLimitsUpdateBatch({
      patientLimitList: targetData,
    });
    if (res?.code === 200) {
      message.success('更新成功');
      return;
    }
  };
  const columns = [
    {
      title: '报警限名称',
      dataIndex: 'itemName',
      key: 'itemName',
    },
    {
      title: '最小值',
      dataIndex: 'lowerLimit',
      key: 'lowerLimit',
      render: (text: any, record: any, inx: any) => {
        return (
          <InputNumber
            placeholder="最小值"
            value={text}
            onChange={(e) => handleChangeLimit(e, inx, 'lowerLimit')}
          />
        );
      },
    },
    {
      title: '最大值',
      dataIndex: 'upperLimit',
      key: 'upperLimit',
      render: (text: any, record: any, inx: any) => {
        return (
          <InputNumber
            placeholder="最大值"
            value={text}
            onChange={(e) => handleChangeLimit(e, inx, 'upperLimit')}
          />
        );
      },
    },
    {
      title: '报警级别',
      dataIndex: 'level',
      key: 'level',
      render: (text: any, record: any, inx: any) => {
        return (
          <Select
            placeholder="报警级别"
            value={text}
            options={sysDictLevelListData}
            onChange={(e) => handleChangeLimit(e, inx, 'level')}
          />
        );
      },
    },
    {
      title: '报警开关',
      dataIndex: 'alarmSwitch',
      key: 'alarmSwitch',
      render: (text: any, record: any, inx: any) => {
        return (
          <Switch
            value={text == 1 ? true : false}
            onChange={(e) => handleChangeLimit(e, inx, 'alarmSwitch')}
          />
        );
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
  ];

  useEffect(() => {
    getBaseData();
  }, []);
  return (
    <PageContainer
      header={{
        title: <></>,
        ghost: true,
      }}
    >
      <ProCard className="detail-pro-card patient-limit-warpper">
        <Row gutter={20}>
          <Col span={6}>姓名：{patientData?.name}</Col>
          <Col span={6}>
            性別：
            {patientData.sex == 1 ? '男' : patientData.sex == 2 ? '女' : '---'}
          </Col>
          <Col span={6}>
            床位：{patientData?.ward?.name}
            {patientData?.ward?.bed?.code
              ? '/' + patientData?.ward?.bed?.code
              : '-'}
          </Col>
          <Col span={6}>手机号：{patientData.phone || '---'}</Col>
        </Row>
        <Row gutter={20} style={{ marginTop: 16 }}>
          <Col span={24} style={{ display: 'flex' }}>
            关联设备：
            {patientData?.ward?.bed?.deviceList &&
            patientData?.ward?.bed?.deviceList?.length > 0 ? (
              <>
                {patientData?.ward?.bed?.deviceList.map(
                  (its: any, inx: number) => {
                    return (
                      <div key={its.id}>
                        {its.name}
                        {inx + 1 <
                          patientData?.ward?.bed?.deviceList.length && (
                          <span>、</span>
                        )}
                      </div>
                    );
                  },
                )}
              </>
            ) : (
              '---'
            )}
          </Col>
        </Row>
        <div className="limit-con">
          <div
            style={{
              marginBottom: 16,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              paddingTop: 16,
            }}
          >
            <div style={{ fontSize: 16, marginLeft: 16, color: '#1677ff' }}>
              报警限更新
            </div>
            <Button
              type="primary"
              style={{ marginRight: 16 }}
              onClick={handleUpDateLimit}
            >
              保存
            </Button>
          </div>
          <Table
            dataSource={patientLimitsListData}
            columns={columns}
            pagination={false}
          />
        </div>
      </ProCard>
    </PageContainer>
  );
};

export default PatientLimit;
